﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>物理监控</title>
	<link rel="stylesheet" href="../css/css.css">
	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<link type="text/css" rel="Stylesheet" href="../css/pm.css" />
	<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="../js/messagecenter.js"></script>
	<script type="text/javascript" src="../js/common.js"></script>
	<style type="text/css">
		.app_text{
			color:#04A0E9;
		}
		.page-split input{
			display:inline;
			margin:0px 4px;
		}
		.text_color{
			color:#A6A6A6;
			text-align: left;
			text-indent: 20px;
		}
		.r-text{
			font-size: 13px;
			text-align: center;
			margin-top: 10px;
		}

		.box-img{
			z-index: 1000;
		}

	</style>
</head>
<body>
<div class="rightKey shadow">
	<div class="rk1" onclick="viewA();">查看A类信息</div>
	<div class="rk2" onclick="viewB();">查看B类信息</div>
	<div class="rk3" onclick="viewC();">查看C类信息</div>
	<div class="rk4" onclick="viewD();">查看D类信息</div>
</div>
<div class="left_content">
	<div class="left_block1">
		<div class="left_logo"></div>
		<div class="left_title">品牌数据库编辑器，高效工作，人性化交互</div>
		<div class="left_icons">
			<div class="left_icon1"></div>
			<div class="left_icon2"></div>
			<div class="left_icon3"></div>
		</div>
	</div>
	<div class="left_block2">
		<div class="left_menu"><a href="../html/tfLibrary.html" >拓扑文件库</a></div>
		<div class="left_menu"><a href="../html/lapLibrary.html">逻辑预案库</a></div>
		<div class="left_menu"><a href="../html/bsk.html">部署库</a></div>
		<div class="left_menu">监控</div>
		<div class="left_menu">其他</div>
	</div>
	<div class="left_block3">
		<div class="left_title">快捷管理机箱、板卡、芯片，提高工作效率便捷查找功能相关物理和逻辑链接，高效编辑请登陆BDE账号</div>
		<button class="login">登录</button>
	</div>
</div>
<div class="right_content" >
	<form id="form1">
		<input type="hidden" id="curId" name="curId">
		<!-- 头部 -->
		<div class="top-bar">
			<div style="float:left;">物理监控<br>
				<span  class="text_color"  style="font-size: 13px;">Physical&nbsp;moniting</span>
			</div>
			<div class="excuCMD">
				<button type="button" onclick="open_pop();">全局搜索</button>
				<button type="button" onclick="open_pop3();">控制台</button>
			</div>
			<div class="b1">1.10以内<img src="../images/monitors/1.1.png"></div>
			<div class="b2">2.1000以内<img src="../images/monitors/2.1.png"></div>
			<div class="b3">3.10000以内<img src="../images/monitors/3.1.png"></div>
			<div class="b4">4.100000以内<img src="../images/monitors/4.1.png"></div>
			<div class="b5">5.1000000以内<img src="../images/monitors/5.1.png"></div>
		</div>
		<!-- 右侧 -->
		<div class="right pop-right">
			<div class="r0 app_text">属性栏</div>

			<div  class="lu expand" style="cursor:pointer;">
				物理链路
			</div>

			<div  class="attrA expand" style="cursor:pointer;">
				物理端口A属性
			</div>

			<div  class="attrB expand" style="cursor:pointer;">
				物理端口B属性
			</div>

			<div  class="infoA expand" style="cursor:pointer;">
				物理端口A统计信息
			</div>

			<div  class="infoB expand" style="cursor:pointer;">
				物理端口B统计信息
			</div>
		</div>
		<!-- 左侧 -->
		<div class="table-box">
			<!--<img src="../images/monitors/line.png" class="line">
            <img src="../images/monitors/line2.png" class="line2">-->
			<div class="card">
				<div class="card_top">
					<div class="card-bar1"><img src="../images/monitors/main.png" style="margin-right:10px;">主机</div>
					<div class="card-bar2">2个板卡</div>
				</div>
				<div class="cell shadow">
					<div class="cell-bar">
						<div class="cell-bar1"><img src="../images/monitors/card.png" style="margin-right:10px;">板卡</div>
						<div class="cell-bar2">4个单元</div>
					</div>
					<div class="cp"><img class="box-img" src="../images/monitors/physical1/1.png"></div>
					<div class="cp"><img class="box-img" src="../images/monitors/physical1/1.png"></div>
					<div class="cp"><img class="box-img" src="../images/monitors/physical1/1.png"></div>
					<div class="cp"><img class="box-img" src="../images/monitors/physical1/1.png"></div>
				</div>

			</div>
		</div>
	</form>
</div>
<!--查询弹窗-->
<div class="pop_content" id="showInfo" style="display:none;">
	<div class="pop_block">
		<div class="pop_barInfo" >
			<div style="font-size: 18px;">搜索</div>
		</div>
		<div class="exit_pop" ><img style="cursor:pointer;" alt="" src="../images/bsk/pop_exit.png" onclick="exit_pop();"></div>
		<div class="pop_input">
			<button class="searchAll" type="button">搜索</button>
			<input class="s_input" id="condition" type="text" name="" placeholder="输入编号或名称搜索"/>
			<button class="s_right" onclick="reset()" type="button">重置</button>
		</div>
		<div class="headerTableDiv2">
			<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
				<colgroup>
					<col width="20%">
					<col width="20%">
					<col width="20%">
					<col width="20%">
					<col width="20%">
				</colgroup>
				<tr>
					<td><div>序号</div></td>
					<td><div>APP名称</div></td>
					<td><div>类型</div></td>
					<td><div>状态</div></td>
					<td><div>备注</div></td>
				</tr>
			</table>
		</div>
		<div class="contentTableDiv2">
			<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;" >
				<colgroup>
					<col width="20%">
					<col width="20%">
					<col width="20%">
					<col width="20%">
					<col width="20%">
				</colgroup>
				<tbody class="popTbody"></tbody>
			</table>
		</div>
	</div>
</div>
<!--CMD弹窗-->
<div class="pop_content3" id="showInfo3" style="display:none;">
	<div class="pop_block3">
		<div class="pop_barInfo" >
			<div style="font-size: 14px;color:#434C53">控制台</div>
			<div style="font-size: 12px;color:#989898">The&nbsp;console</div>
		</div>
		<div class="exit_pop" ><img style="cursor:pointer;" alt="" src="../images/bsk/pop_exit.png" onclick="exit_pop3();"></div>
		<div class="contentText">
			<textarea class="contentTextTextArea"></textarea>
		</div>
		<div class="pop_excute">
			<button class="excute" type="button">立即执行</button>
			<input class="ex_input" id="condition" type="text" name="" placeholder="输入命令"/>
			<button class="ex_reset" type="button" onclick="popHide()">隐藏</button>
		</div>
	</div>
</div>
<!--物理路由表弹窗-->
<div class="pop_content2" id="showInfo2" style="display:none;">
	<div class="pop_block2">
		<div class="pop_barInfo" >
			<div style="font-size: 18px;">物理路由表信息查看</div>
		</div>
		<div class="exit_pop" ><img style="cursor:pointer;" alt="" src="../images/bsk/pop_exit.png" onclick="exit_pop2();"></div>
		<div class="headerTableDiv2">
			<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
				<colgroup>
					<col width="20%">
					<col width="20%">
					<col width="20%">
					<col width="20%">
					<col width="20%">
				</colgroup>
				<tr>
					<td><div>设备ID</div></td>
					<td><div>目标ID</div></td>
					<td><div>入端口ID</div></td>
					<td><div>出端口ID</div></td>
					<td><div>出端口ID</div></td>
				</tr>
			</table>
		</div>
		<div class="contentTableDiv2">
			<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;" >
				<colgroup>
					<col width="20%">
					<col width="20%">
					<col width="20%">
					<col width="20%">
					<col width="20%">
				</colgroup>
				<tbody class="popTbody2">
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
				</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>

</body>

<script type="text/javascript">

    $(document).bind('contextmenu',function(){
        return false;
    });
    /*右键*/
    $(document).on("mousedown",".box-img",function(e){
        var type= e.which;
        if(type==3){
            var x = e.clientX;
            var y = e.clientY;
            $(".rightKey").css({left:x+"px",top:y+"px"});
            $(".rightKey").show();
            e.stopPropagation();
            return  false;
        }

    });

    $("body").click("mousedown",function(e){
        $(".rightKey").hide();
    });
    function viewA(){
        $(".rightKey").hide();
        open_pop2();
    }
    function viewB(){
        $(".rightKey").hide();
        open_pop2();
    }
    function viewC(){
        $(".rightKey").hide();
        open_pop2();
    }
    function viewD(){
        $(".rightKey").hide();
        open_pop2();
    }

    /*右侧列表*/
    $(".lu.expand").on("click",function(){
        if($(this).hasClass("pop-hide")){
            $(this).removeClass("pop-hide")
            $(".child_tr").remove();
        }else{
            /*
            var id=$(this).parents("tr").find(".conn_no").val();
            var url = 'logic_topology/get_by_id';
            var param = {id:id};
            $.post(url,param,"JSON").done(function(data){
                if(data&&data.length>0){
                    addDataPop(data);
                }
            }); */
            var html='<div class="child_tr">';
            html+='<table class="childList">';
            html+='<tr><td>物理连路ID</td><td><div class="app_text">1</div></td></tr>';
            html+='<tr><td>链路主备</td><td><div class="app_text">11</div></td></tr>';
            html+='<tr><td>连路Down</td><td><div class="app_text">0</div></td></tr>';
            html+='<tr><td>链路模式</td><td><div class="app_text">4x</div></td></tr>';
            html+='<tr><td>链路质量等级</td><td><div class="app_text">0</div></td></tr>';
            html+='</table>';
            html+='</div>';
            $(this).after(html);
            $(this).addClass("pop-hide")
        }

    });
    $(".attrA.expand").on("click",function(){
        if($(this).hasClass("pop-hide")){
            $(this).removeClass("pop-hide")
            $(".child_tr").remove();
        }else{
            /*
            var id=$(this).parents("tr").find(".conn_no").val();
            var url = 'logic_topology/get_by_id';
            var param = {id:id};
            $.post(url,param,"JSON").done(function(data){
                if(data&&data.length>0){
                    addDataPop(data);
                }
            }); */
            var html='<div class="child_tr">';
            html+='<table class="childList">';
            html+='<tr><td>网络ID</td><td><div  class="app_text">11</div></td></tr>';
            html+='<tr><td>端口ID</td><td><div  class="app_text">11</div></td></tr>';
            html+='<tr><td>端口B模式</td><td><div  class="app_text">0</div></td></tr>';
            html+='<tr><td colspan="2"><div onclick="open_pop2()" style="cursor:pointer;" class="app_text">查看路由表项</div></td></tr>';
            html+='</table>';
            html+='</div>';

            $(this).after(html);
            $(this).addClass("pop-hide")
        }

    });
    $(".attrB.expand").on("click",function(){
        if($(this).hasClass("pop-hide")){
            $(this).removeClass("pop-hide")
            $(".child_tr").remove();
        }else{
            /*
            var id=$(this).parents("tr").find(".conn_no").val();
            var url = 'logic_topology/get_by_id';
            var param = {id:id};
            $.post(url,param,"JSON").done(function(data){
                if(data&&data.length>0){
                    addDataPop(data);
                }
            }); */
            var html='<div class="child_tr">';
            html+='<table class="childList">';
            html+='<tr><td>网络ID</td><td><div class="app_text">11</div></td></tr>';
            html+='<tr><td>端口ID</td><td><div class="app_text">11</div></td></tr>';
            html+='<tr><td>端口B模式</td><td><div class="app_text">0</div></td></tr>';
            html+='<tr><td colspan="2"><div onclick="open_pop2()" style="cursor:pointer;" class="app_text">查看路由表项</div></td></tr>';
            html+='</table>';
            html+='</div>';

            $(this).after(html);
            $(this).addClass("pop-hide")
        }

    });
    $(".infoA.expand").on("click",function(){
        if($(this).hasClass("pop-hide")){
            $(this).removeClass("pop-hide")
            $(".child_tr").remove();
        }else{
            /*
            var id=$(this).parents("tr").find(".conn_no").val();
            var url = 'logic_topology/get_by_id';
            var param = {id:id};
            $.post(url,param,"JSON").done(function(data){
                if(data&&data.length>0){
                    addDataPop(data);
                }
            }); */
            var html='<div class="child_tr">';
            html+='<table class="childList">';
            html+='<tr><td>输入所有包个数</td><td><div class="app_text">7236495</div></td></tr>';
            html+='<tr><td>输入重传包个</td><td><div class="app_text">1258</div></td></tr>';
            html+='<tr><td>输入4字节数据量</td><td><div class="app_text">47029920</div></td></tr>';
            html+='<tr><td>输入宽带</td><td><div class="app_text">1.446M/S</div></td></tr>';
            html+='<tr><td>输入重传率</td><td><div class="app_text">13.00</div></td></tr>';
            html+='</table>';
            html+='</div>';

            $(this).after(html);
            $(this).addClass("pop-hide")
        }
    });
    $(".infoB.expand").on("click",function(){
        if($(this).hasClass("pop-hide")){
            $(this).removeClass("pop-hide")
            $(".child_tr").remove();
        }else{
            /*
            var id=$(this).parents("tr").find(".conn_no").val();
            var url = 'logic_topology/get_by_id';
            var param = {id:id};
            $.post(url,param,"JSON").done(function(data){
                if(data&&data.length>0){
                    addDataPop(data);
                }
            }); */
            var html='<div class="child_tr">';
            html+='<table class="childList">';
            html+='<tr><td>输入所有包个数</td><td><div class="app_text">7236495</div></td></tr>';
            html+='<tr><td>输入重传包个</td><td><div class="app_text">1258</div></td></tr>';
            html+='<tr><td>输入4字节数据量</td><td><div class="app_text">47029920</div></td></tr>';
            html+='<tr><td>输入宽带</td><td><div class="app_text">1.446M/S</div></td></tr>';
            html+='<tr><td>输入重传率</td><td><div class="app_text">13.00</div></td></tr>';
            html+='</table>';
            html+='</div>';

            $(this).after(html);
            $(this).addClass("pop-hide")
        }
    });
    /*物理路由弹窗*/
    function addDataPop2(data){
        $(".contentTableDiv2 .popTbody2").empty();
        var html = '';
        $.each(data,function(k,v){
            html += '<tr>';
            html += '<td>'+v.no+'</td>';
            html += '<td>'+v.name+'</td>';
            html += '<td>'+v.type+'</td>';
            html += '<td>'+v.state+'</td>';
            html += '<td>'+v.note+'</td>';
            html += '</tr>';
        });
        $(".contentTableDiv2 .popTbody2").append(html);
    }

    function open_pop2(){
        /* var url = 'deploy_topology/get_by_id';
        var param = {id:id};
        $.post(url,param,"JSON").done(function(data){
            if(data&&data.length>0){
                addDataPop(data)
            }
        }); */
        var dataArr = [];
        for(i=1;i<=20;i++){
            var dataJson = {};
            dataJson.no = i;
            dataJson.name = "OX8E_"+i;
            dataJson.type="string";
            dataJson.state = i;
            dataJson.note = "string";
            dataArr.push(dataJson);
        }
        addDataPop2(dataArr);
        $("#showInfo2").show();
        tableSum();
    }
    /*CMD弹窗*/
    function open_pop3(){
        $("#showInfo3").show();
    }
    function exit_pop3(){
        $("#showInfo3").hide();
    }
    /*查询弹窗*/
    function open_pop(){
        $("#showInfo").show();
        $(".searchAll").on("click",function () {
            alert("全局搜索");
            /* var url = 'deploy_topology/get_by_id';
           var param = {condition:$("#condition").val()};
           $.post(url,param,"JSON").done(function(data){
               if(data&&data.length>0){
                   addDataPop(data)
                    tableSum();
               }
           }); */
            var dataArr = [];
            for(i=1;i<=20;i++){
                var dataJson = {};
                dataJson.no = i;
                dataJson.name = "OX8E_"+i;
                dataJson.type="string";
                dataJson.state = i;
                dataJson.note = "string";
                dataArr.push(dataJson);
            }
            addDataPop(dataArr);
            tableSum();
        });

    }
    function popHide(){
        $(".pop_excute").hide();
    }
    function reset(){
        $("#condition").val("");
    }
    function addDataPop(data){
        $(".contentTableDiv2 .popTbody").empty();
        var html = '';
        $.each(data,function(k,v){
            html += '<tr>';
            html += '<td>'+v.no+'</td>';
            html += '<td>'+v.name+'</td>';
            html += '<td>'+v.type+'</td>';
            html += '<td>'+v.state+'</td>';
            html += '<td>'+v.note+'</td>';
            html += '</tr>';
        });
        $(".contentTableDiv2 .popTbody").append(html);
    }
    function exit_pop(){
        $("#showInfo").hide();
    }
    function exit_pop2(){
        $("#showInfo2").hide();
    }
    function tableSum() {
        $(".contentTableDiv2").scrollTop(10);// 控制滚动条下移10px
        if ($(".contentTableDiv2").scrollTop() > 0) {
            var scrollWidth = getScrollbarWidth();
            $(".contentTableDiv2").css("right",(30-scrollWidth)+"px");
        } else {
            $(".contentTableDiv2 table").css("width", "100%");
        }
        $(".contentTableDiv2").scrollTop(0);// 滚动条返回顶部
    }
    $(function(){
        tableSum();
    });

    $(window).resize(function() {
        tableSum();
    });

    function getScrollbarWidth() {
        var odiv = document.createElement('div'),//创建一个div
            styles = {
                width: '100px',
                height: '100px',
                overflowY: 'scroll'//让他有滚动条
            }, i, scrollbarWidth;
        for (i in styles) odiv.style[i] = styles[i];
        document.body.appendChild(odiv);//把div添加到body中
        scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;//相减
        odiv.remove();//移除创建的div
        return scrollbarWidth;//返回滚动条宽度
    }
</script>
</html>
